<template>
  <div class="replenishmentPickingDetail">
    <div class="hbb-pickingRecordBox" style="padding-bottom:1.28rem">
      <div class="customer-title">
        {{cloudShopName}}
      </div>
      <!-- 列表部分 -->
      <div class="hbb-dataList">
        <div class="group" v-for="(oneDetail, detail_index) in pickingDataList" :key="detail_index">
          <div class="time">{{oneDetail.pickingTime_text}}</div>
          <div class="carInfo" v-if="oneDetail.autoDetail.auto_text.length>0" @click="jumpToPickingDetailed(oneDetail)">
            <div class="">
              <img class="logoImg" :src="oneDetail.autoDetail.auto_logo" alt="">
            </div>
            <div class="one">
              <div class="oneBox">
                <span class="one">{{oneDetail.autoDetail.auto_text}}</span>
                <span class="two">{{oneDetail.autoDetail.vin_code}}</span>
              </div>
              <img class="arrow_right" src="../assets/images/arrow_linkGrey.png" alt="">
            </div>
          </div>
          <div class="info">
            <div class="header">
              <div class="one">商品信息</div>
              <div class="two">领料数</div>
              <div class="three">单价</div>
              <div class="four">领料人</div>
            </div>
            <div class="grounp">
              <div class="one">
                <b class="hbb-clearLeft" @click='on_partInfo_click(oneDetail)'>
                  {{oneDetail.brandName}} {{oneDetail.displayPartsNo}}
                </b>
                <div class="lusir-kuwei" v-if="oneDetail.storeHouse">
                  <span style="color: #bcbcbc;" class="label">库位：</span>
                  <span style="color: #181818;">{{oneDetail.storeHouse}}</span>
                </div>
              </div>
              <div :class="oneDetail.pickingQty<0 ? 'two red' : 'two'">
                {{oneDetail.pickingQty}}
              </div>
              <div class="three" style="color:#e74c3c">¥{{oneDetail.price_text}}</div>
              <div class="four" style="color:#5b5b5b">{{oneDetail.pickingUser}}</div>
            </div>
            <div class="hb-total">
              <span class="k" v-if="oneDetail.sourceType==10">库存调整</span>
              合计：
              <span>{{oneDetail.totalPrice_text}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情弹层 -->
    <partItemDetailDialog v-if="partItemDetailDialog_launched" :shopDetail_input="partItemDetailDialog_input" :shopDetail_mode="partItemDetailDialog_initMode" @close="on_partItemInfoDialog_close">
    </partItemDetailDialog>

    <!-- 底部按钮 -->
    <!-- <div class="sdw-buttonFool">
      <div class='sdw-buttonBox'>
        <div class="btn" @click="navigateBackFn">关 闭</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import partItemDetailDialog from "../components/partItemDetailDialog";
export default {
  name: "",
  data() {
    return {
      cloudShopId: 0, // 云店id
      query_customerTeamId: 0, //页面入参: 客户ID
      query_startDate: "", // 开始时间
      query_endDate: "", // 截止时间
      query_partItemId: 0, //页面入参: 商品ID
      query_partItemType: 1, //页面入参: 商品类型 1:云店商品 2:客户原始商品
      pickingDataList: [], //领料明细
      partItemDetailDialog_launched: false, // 是否启动商品详情的弹层组件
      partItemDetailDialog_initMode: "", // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemDetailDialog_input: {}, // 启动商品详情弹层的 入参
      cloudShopName: "",
    };
  },
  components: {
    partItemDetailDialog,
  },
  created() {
    this.query_customerTeamId = this.$route.query.teamid || 0;
    this.query_startDate = this.$route.query.sdate || null;
    this.query_endDate = this.$route.query.edate || null;
    this.query_partItemId = this.$route.query.itemid || 0;
    this.query_partItemType = this.$route.query.itemtype || 1;
    this.initPage();
  },
  methods: {
    initPage() {
      this.GetReplenishmentPickingDetail();
    },
    // 取得领料明细
    async GetReplenishmentPickingDetail() {
      const res = await this.$appServive({
        url: "/Replenishment/GetReplenishmentPickingDetailV2",
        data: {
          customerTeamId: this.query_customerTeamId || 0,
          startDate: this.query_startDate || null,
          endDate: this.query_endDate || null,
          partItemId: this.query_partItemId || 0,
          partItemType: this.query_partItemType || 1,
        },
        isShowLoading: true,
      });
      if (res) {
        if (res.details) {
          res.details.forEach((x) => {
            x.pickingTime_text = this.$com_util.getNewDate(
              x.pickingTime,
              3
            );
            x.price_text = this.$com_util.formatCurrency(x.price);
            x.totalPrice_text =
              x.totalPrice > 0
                ? "¥" + this.$com_util.formatCurrency(x.totalPrice)
                : "¥" +
                this.$com_util.formatCurrency(Math.abs(x.totalPrice));
          });
        }
        this.pickingDataList = res.details;
        this.cloudShopId = res.cloudShopId;

        let cloudShopId = res.cloudShopId;
        this.getSimpleShopInfo(cloudShopId);
      }
    },
    // 返回
    navigateBackFn() {
      this.$router.go(-1);
    },
    jumpToPickingDetailed(infodetail) {
      let beforeDate = infodetail.pickingTime; // 后端返回的这条车领料的时间
      let newDate = this.$com_util.getNewDate(beforeDate, 1); // 过滤时间格式
      this.$router.push({
        path: `/customerPickingDetailed`,
        query: {
          vin: infodetail.autoDetail.vin_code,
          customerTeamId: this.query_customerTeamId,
          startDate: newDate,
          endDate: newDate,
        },
      });
    },
    // 取经销商名称
    async getSimpleShopInfo(cloudShopId) {
      const res = await this.$appServive({
        url: "/CloudShop/GetSimpleShopInfo",
        data: {
          cloudShopId: cloudShopId,
        },
        isShowLoading: true,
      });
      this.cloudShopName = res.cloudShopName;
    },
    // 启动商品详情弹层
    on_partInfo_click(oneItem) {
      this.partItemDetailDialog_launched = true;
      this.partItemDetailDialog_initMode = "partItemInfo";
      this.partItemDetailDialog_input.shopId = this.cloudShopId;
      this.partItemDetailDialog_input.partItemId = oneItem.partItemId;
      console.log('this.partItemDetailDialog_input1', this.partItemDetailDialog_input);

    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.partItemDetailDialog_launched = false;
    },
  },
};
</script>

<style scoped>
div,
span,
button {
  box-sizing: border-box;
}

page {
  background: #edf1f6;
}

/* pages/rfqReplyReader/rfqReplyReader.wxss */

div,
span,
button {
  box-sizing: border-box;
}

page {
  background: #edf1f6;
}

.customer-title {
  height: 1.12rem;
  min-height: 1.12rem;
  width: 100%;
  background: #ffc100;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.42rem;
  font-weight: bold;
}

.hbb-pickingRecordBox {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hbb-dateSelect {
  display: flex;
  width: 100%;
  justify-content: center;
  background: #fff;
  padding-bottom: 0.27rem;
}

.hbb-dateSelect div {
  margin-left: 0.53rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.hbb-dataList,
.hbb-dataList .group {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hbb-dataList .group .time {
  display: flex;
  width: 100%;
  padding: 0.27rem 0.13rem;
  justify-content: center;
  font-size: 0.32rem;
  color: #96a6bc;
}

.hbb-dataList .group .carInfo {
  display: flex;
  width: 100%;
  align-items: center;
  background: #f9f9f9;
  padding: 0.21rem 0.4rem;
}
.hbb-dataList .group .carInfo .arrow_right {
  width: 0.18rem;
  height: 0.32rem;
  margin-left: auto;
}

.hbb-dataList .group .carInfo .logoImg {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.13rem;
  margin-right: 0.27rem;
  border: 1px solid #bcbcbc;
}

.hbb-dataList .group .carInfo div.one {
  font-size: 0.37rem;
  flex: 1;
  display: flex;
  align-items: center;
}

.hbb-dataList .group .carInfo div.one .oneBox {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.37rem;
}

.hbb-dataList .group .carInfo span.one {
  font-size: 0.37rem;
  color: #181818;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
}

.hbb-dataList .group .carInfo span.two {
  line-height: 0.37rem;
  font-size: 0.32rem;
  color: #bcbcbc;
  width: 100%;
  display: inline-block;
}

.hbb-dataList .group .info {
  display: flex;
  width: 100%;
  background: #fff;
  flex-direction: column;
  padding: 0 0.21rem;
}

.hbb-dataList .group .info div {
  width: 100%;
  align-items: center;
}

.hbb-dataList .group .info div.grounp {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.4rem 0;
}

.hbb-dataList .group .info div.header {
  border-bottom: 1px solid #ebebeb;
  height: 1rem;
  font-size: 0.32rem;
  color: #bcbcbc;
  display: flex;
  width: 100%;
  align-items: center;
}

.hbb-dataList .group .info div.header div {
  color: #bcbcbc;
}

.hbb-dataList .group .info div {
  float: left;
  line-height: 0.48rem;
  color: #5b5b5b;
}

.hbb-dataList .group .info div b.hbb-clearLeft {
  float: none;
  color: #4084ea;
}

.hbb-dataList .group .info div.one {
  float: left !important;
  width: 40%;
  font-size: 0.36rem;
}

.hbb-dataList .group .info div.two {
  width: 22%;
  justify-content: center;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .group .info div.three {
  width: 18%;
  justify-content: center;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .group .info div.four {
  width: 20%;
  justify-content: center;
  font-size: 0.36rem;
  text-align: center;
}

.hbb-dataList .group .info div.red {
  color: #e74c3c;
}

.hbb-xilie {
  border-radius: 0.16rem 0.03rem 0.16rem 0.04rem;
  background: #fab220;
  color: #fff;
  display: inline-block;
  padding: 0.03rem 0.11rem;
  font-size: 0.32rem;
  margin-left: 0.11rem;
}

.hb-total {
  display: flex;
  width: 100%;
  padding: 0.27rem 0.27rem;
  justify-content: flex-end;
  border-top: 1px solid #ddd;
  font-size: 0.32rem;
  position: relative;
}

.hb-total span {
  color: #282828;
  font-weight: bold;
}

.hbb-time {
  display: flex;
  width: 100%;
  justify-content: space-between !important;
  padding: 0 0.27rem;
}

.hbb-time span {
  display: flex;
  align-items: center;
  line-height: 0.27rem;
}

.hb-total .k {
  position: absolute;
  left: 0;
  float: left;
  font-size: 0.32rem;
  color: #e74c3c !important;
}

.sdw-buttonFool {
  width: 100%;
  height: 1.28rem;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 55;
}

.sdw-buttonFool .sdw-buttonBox {
  width: auto;
  height: 0.8rem;
  position: relative;
}

.sdw-buttonFool .sdw-buttonBox .btn {
  width: auto;
  height: 0.8rem;
  padding: 0 0.8rem;
  border: 1px solid #e74c3c;
  border-radius: 0.4rem;
  background: #fff;
  font-size: 0.4rem;
  text-align: center;
  color: #e74c3c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lusir-kuwei {
  display: flex;
  align-items: center;
}

.hbb-dataList .group .grounp div.one {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hbb-dataList .group .grounp {
  display: flex;
  align-items: flex-start !important;
  position: relative;
}

.hbb-dataList .group .grounp .two {
  line-height: 0.52rem;
}

.hbb-dataList .group .grounp .three {
  line-height: 0.52rem;
}

.hbb-dataList .group .grounp .four {
  line-height: 0.52rem;
}
</style>
